<template>
<div class="Back">
    <div class="Interface flex">
      
      <div class="login"  ref="backImg"></div>
      <div class="baseframe loginframe flex"  ref="frame">
         
        <div id="frame">
            <p id="frametitle">{{ title }}</p>
            <el-form :model="user" ref="loginform" :rules="rules" style="width:100%">

                <el-form-item  prop="username" >
                    <el-input type="text" v-model="user.username" :maxlength=10   clearable
                            placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>        
                </el-form-item>

                <el-form-item  prop="password" >
                    <el-input  type="password" v-model="user.password"  show-password :maxlength=10  clearable
                            placeholder="请输入密码" prefix-icon="el-icon-lock" @keyup.enter.native="handerEnter"></el-input>
                </el-form-item>              

            </el-form>

            <button class="button activebutton" v-if="state==0" @click="login()" >登录</button>
            <button class="button deactivebutton"  v-if="state==1" @click="changeToLogin()">去登录</button>

            <button class="button activebutton" v-if="state==1" @click="register()" >注册</button>
            <button class="button deactivebutton" v-if="state==0" @click="changeToRegister()">去注册</button>

            <el-button  :loading="true"  class="loadingbutton" v-if="state==2">{{loadingMsg}}</el-button>
        </div>
          
      </div>

        <i class="el-icon-close exit" @click="LOGINSTATEDOWN()"></i>
    </div>
</div>
</template>
<script>
import {mapActions,mapState,mapMutations} from 'vuex'
export default {
  name: "Login",
  data() {
      // 正则表达式验证
     const check = (rule, value, callback) => {
        const regPass = /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{1,10}/   
        const regUser=/^[a-zA-Z0-9]{0,12}$/
        let name=rule.field
        let obj={username:"账号",password:"密码"}

        if(value === "" ||value==null) 
         return  callback(new Error(`${obj[name]}不能为空!`))      
        
        if(value.length<1 || value.length>10) 
         return callback(new Error('长度只能在1-10位之间'))
        
        if(name=="username" && !(regUser.test(value))) 
         return callback(new Error(`${obj[name]}只能为数字或者字母组成!`))

        if(name=="password" && !(regPass.test(value))) 
        return callback(new Error(`${obj[name]}至少包含大小写字母和数字`))

        return callback()
      }
    return {
      title: "Login In",
      state:0, // 0:登录框 1:注册框
      loadingMsg:'登录中',
      user:{ username:"", password:""},
      rules: { //表单验证规则
        username: [ { validator: check, trigger: 'blur' },],
        password: [ { validator: check, trigger: 'blur' },],
      },
    }
  },
  computed:{
     ...mapState('Login',['LoginState']),
     ...mapState('Init',['ComputerInfo']),
  },
  mounted() {
    document.body.style.overflow = 'hidden',
    this.user = { username:"", password:""}
  },
  beforeDestroy(){
    document.body.style.overflow = 'auto'
  },
 
  methods:{       
     ...mapActions('Login',['loginIn','createUser']),
     ...mapMutations('Login',['LOGINSTATEDOWN']),
     handerEnter(){
         if(this.state == 0)
         return this.login()
         return this.register()
     },
     changeToRegister(){
        this.$refs.frame.className="baseframe registerframe flex"
        this.$refs.backImg.className="register"
        this.$refs.loginform.clearValidate()
        this.title="Create User"
        this.user={}
        this.state=1
     },
     changeToLogin(){
         this.$refs.frame.className="baseframe loginframe flex"
         this.$refs.backImg.className="login"
         this.$refs.loginform.clearValidate()
         this.title="Login In"
         this.user={}
         this.state=0
     },
     async login(){
         
         let statelast= this.state
         this.$refs.loginform.validate( async (valid) => {
            if (valid) {
               this.state=2
               this.loadingMsg='登录中'
               let res =  await this.loginIn({...this.user,...this.ComputerInfo})

               if(res.code==200){
                   let data={content:'欢迎来到MT博客',type:'success',duration:1}
                   this.$public.AddInform(data)
               }
               else this.$message.error(res.message)
               
                this.state=statelast
             }
        })
     },
    async register(){
          let statelast= this.state
          this.$refs.loginform.validate(async (valid) => {
            if (valid) {
               this.state=2
               this.loadingMsg='注册中'
               let res =  await this.createUser(this.user)             
               if(res.code==200) return this.login() 
                this.$message.error(res.message)
                 this.state=statelast   
             }
           })
        }
  }
};
</script>
<style scoped lang="less">

 /* 平板或手机 */
 @media screen and (max-width: 1100px){
    div.baseframe{
        width: 100%;
        border-radius: 0;
        animation:none;
        background: var(--GeneralBackColor-half);
    }
    div.login,div.register{
        background-size: 100% 100%;
        background-position: center center;
    }
 }
@media screen and (max-width: 1400px){

    div.login,div.register{
        background-size: 40% 50%;
    }
    div.login{
       background-position: 20% center;
    }
     div.register{
       background-position: 80% center;
    }
 }

.Back{
  background: rgba(0, 0, 0, 0.6);
}
.Interface{ //框
   width: 50vw;
   height: 50vh;
   min-width: 300px;
   min-height: 400px;
   max-height: 90vh;
   position: absolute;
   overflow: hidden;
   border-radius: 10px;
}

//登录
.login {
  width: 50vw;
  height: 50vh;
  min-width: 300px;
   min-height: 400px;
  background: var(--GeneralBackColor-half) url("@/assets/default/background/loginback.png") no-repeat;
  background-size: 50% 70%;
  background-position: 10% center;
  position: relative;
  overflow: hidden;
}
//注册
.register{
  width: 50vw;
  height: 50vh;
  min-width: 300px;
  background: var(--GeneralBackColor-half) url("@/assets/default/background/registerback.png") no-repeat;
  background-size: 50% 70%;
  background-position: 90% center;
  position: relative;
  overflow: hidden;
}

.baseframe{
  background: var(--BackColor);
  background: rgba(255, 255, 255, 0.4);
  width: 40%;
  height: 100%;
  position: absolute;
}
.loginframe {
  right: 0;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  animation: login 0.2s linear;
}
.registerframe{
  left: 0;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  animation: register 0.2s linear;
}
@keyframes jump{
    0%{transform: translateY(-100px);}
    50%{transform: translateY(20px);}
    100%{transform: translateY(0px);}
}
@keyframes register {
    0%{
        transform: translate(-50%);
    }
    100%{
        transform: translate(0);
    }
}
@keyframes login {
    0%{
        transform: translate(50%);
    }
    100%{
        transform: translate(0);
    }
}
#frame{
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    // 标题
   #frametitle {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--GeneralBackColor);
  }
  .button{
    box-sizing: border-box;
    width: 45%;
    height: 30px;
    line-height: 0;
    font-size: 15px;
    border-radius: 20px;
    margin-top: 10px;
  }
  .activebutton,.deactivebutton:hover{
    background: var(--GeneralBackColor); 
    color:white
  }
  
  .deactivebutton{
    border: 3px solid var(--GeneralBackColor);
  }
 
  .loadingbutton{
    border-radius: 20px;
    background: var(--GeneralBackColor); 
     margin-top: 10px;
     width: 90%;
  }
}

</style>